<template>
    <div class="box">
        <div class="info clearfix">
            <div class="content white-block">
                <div class="message">
                    <div class="name">
                        <b class="ellipsis">{{user.name}}</b>
                        <i class="iconfont icon-ip-edit edit" @click="jump('account')"></i></div>
                    <p class="two-single-line">{{user.ownDeptName}}</p>
                    <div class="time">{{new Date() | timeFormat('YYYY 年 MM 月 DD 日')}}</div>
                </div>
                <div class="application-message">
                    <div class="line">
                        <i class="iconfont apps icon-apps-solid"></i>我的应用：
                        <span class="num"><b v-if="info">{{info.resCount}}</b><b v-else>0</b> 个</span>
                    </div>
                    <div class="line">
                        <i class="iconfont consult icon-consult-solid"></i>未读消息：
                        <span class="num"><b v-if="info">{{info.unreadNoticeCount}}</b><b v-else>0</b> 个</span>
                    </div>
                </div>
            </div>
            <div class="inform white-block">
                <div class="headline">
                    <span class="title">通知中心</span>
                    <el-button type="primary" class="little" size="small" v-if="noticeList.length>3"
                               @click="$router.push($route.path+'/noticeList')">更多
                    </el-button>
                </div>
                <ul v-if="noticeList[0]">
                    <li v-for="(list,index) in noticeList" :key="index" v-if="index<3"
                        @click="$router.push($route.path+'/noticeDetail/'+list.noticeId)">
                        <span class="ellipsis title">{{list.noticeName}}</span>
                        <span class="inform-time">{{list.noticeStartTime | timeFormat('YYYY.MM.DD')}}</span>
                    </li>
                </ul>
                <div class="tip" v-if="!noticeList[0]">
                    暂无新通知
                </div>
            </div>
        </div>
        <div class="answer white-block">
            <div class="title">
                我的常用应用
            </div>
            <div class="answer-flex">
                <div class="response">
                    <ul>
                        <li v-for="list in apps" :key="list.id">
                            <!--                            <img :src="list.icon">-->
                            <el-image
                                class="img"
                                :src="list.iconInfo.path"
                                v-if="list.iconInfo"
                                fit="scale-down">
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                            <p class="two-single-line">{{list.name}}</p>
                        </li>
                        <li v-if="!apps[0]" class="empty" @click="jump('apps')">
                            <div>
                                <i class="iconfont icon-plus"></i>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="manage-box" @click="jump('apps')">
                    <div class="manage">
                        <i class="iconfont icon-apps"></i>
                    </div>
                    <span>管理我的应用</span>
                </div>
            </div>
        </div>
        <div class="chart clearfix" v-if="info">
            <div class="glance-over white-block clearfix">
                <div class="today">
                    <p>昨日浏览次数</p>
                    <p class="today-num mt10"><b>{{info.todayVisitCount&&info.todayVisitCount[0].data ||
                        0}}</b><span>次</span></p>
                    <chart :type="'line'" :items="items.lineVisit" ref="resCountInit" class="mt10"></chart>
                </div>
                <div class="insert">
                    <p>接入应用数</p>
                    <p class="today-num insert-num mt10"><b>{{info.appJoin || 0}}</b><span>个</span></p>
                    <chart :type="'line'" :items="items.lineJoin" ref="appJoinInit" class="mt10"></chart>
                </div>
            </div>
            <div class="visit white-block clearfix">
                <div class="today">
                    <p>昨日访问用户数</p>
                    <p class="today-num accessing-users mt10"><b>{{info.todayUserCount&&info.todayUserCount[0].data ||
                        0}}</b><span>次</span></p>
                    <chart :type="'line'" :items="items.lineToday" ref="unreadNoticeCountInit" class="mt10"></chart>
                </div>
                <div class="insert">
                    <p>用户总数</p>
                    <p class="today-num insert-num total-user mt10"><b>{{info.totalUser || 0}}</b><span>个</span></p>
                    <chart :type="'line'" :items="items.lineTotal" ref="todayUserInit" class="mt10"></chart>
                </div>
            </div>
        </div>
        <transition name="slide">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import chart from '@/components/chart'

    export default {
        data() {
            return {
                info: {},
                noticeList: [],
                apps: [],
                items: {
                    // 今日浏览次数echarts数据
                    lineVisit: {
                        height: '100%',
                        width: '80%',
                        grid: {
                            left: 0,
                            top: 0
                        },
                        title: {
                            text: ''
                        },
                        xAxis: {
                            show: false, // 横坐标显示与隐藏
                            data: []
                        },
                        yAxis: {
                            show: false // 纵坐标显示与隐藏
                        },
                        series: [{
                            areaStyle: {
                                normal: {
                                    // 改变区域颜色(渐变色)
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0, color: '#5e95e8' // 0% 处的颜色
                                        }, {
                                            offset: 1, color: '#fff' // 100% 处的颜色
                                        }],
                                        global: false // 缺省为 false
                                    }
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#5e95e8', // 改变折线点的颜色
                                    lineStyle: {
                                        color: '#5e95e8', // 改变折线颜色
                                        width: 1
                                    }
                                }
                            },
                            symbol: 'none', // 去掉折线上的小圆点
                            smooth: true, // 这个是把线变成曲线
                            data: []
                        }]
                    },
                    // 接入应用数echarts数据
                    lineJoin: {
                        height: '100%',
                        width: '80%',
                        grid: {
                            left: 0,
                            top: 0
                        },
                        title: {
                            text: ''
                        },
                        xAxis: {
                            show: false, // 横坐标显示与隐藏
                            data: []
                        },
                        yAxis: {
                            show: false // 纵坐标显示与隐藏
                        },
                        series: [{
                            areaStyle: {
                                normal: {
                                    // 改变区域颜色(渐变色)
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0, color: '#7dccb0' // 0% 处的颜色
                                        }, {
                                            offset: 1, color: '#fff' // 100% 处的颜色
                                        }],
                                        global: false // 缺省为 false
                                    }
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#7dccb0', // 改变折线点的颜色
                                    lineStyle: {
                                        color: '#7dccb0', // 改变折线颜色
                                        width: 1
                                    }
                                }
                            },
                            symbol: 'none', // 去掉折线上的小圆点
                            smooth: true, // 这个是把线变成曲线
                            data: []
                        }]
                    },
                    // 昨日访问用户数echarts数据
                    lineToday: {
                        height: '100%',
                        width: '80%',
                        grid: {
                            left: 0,
                            top: 0
                        },
                        title: {
                            text: ''
                        },
                        xAxis: {
                            show: false, // 横坐标显示与隐藏
                            data: []
                        },
                        yAxis: {
                            show: false // 纵坐标显示与隐藏
                        },
                        series: [{
                            areaStyle: {
                                normal: {
                                    // 改变区域颜色(渐变色)
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0, color: '#8065d4' // 0% 处的颜色
                                        }, {
                                            offset: 1, color: '#fff' // 100% 处的颜色
                                        }],
                                        global: false // 缺省为 false
                                    }
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#8065d4', // 改变折线点的颜色
                                    lineStyle: {
                                        color: '#8065d4', // 改变折线颜色
                                        width: 1
                                    }
                                }
                            },
                            symbol: 'none', // 去掉折线上的小圆点
                            smooth: true, // 这个是把线变成曲线
                            data: []
                        }]
                    },
                    // 用户总数echarts数据
                    lineTotal: {
                        height: '100%',
                        width: '80%',
                        grid: {
                            left: 0,
                            top: 0
                        },
                        title: {
                            text: ''
                        },
                        xAxis: {
                            show: false, // 横坐标显示与隐藏
                            data: []
                        },
                        yAxis: {
                            show: false // 纵坐标显示与隐藏
                        },
                        series: [{
                            areaStyle: {
                                normal: {
                                    // 改变区域颜色(渐变色)
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0, color: '#E1819A' // 0% 处的颜色
                                        }, {
                                            offset: 1, color: '#fff' // 100% 处的颜色
                                        }],
                                        global: false // 缺省为 false
                                    }
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#E1819A', // 改变折线点的颜色
                                    lineStyle: {
                                        color: '#E1819A', // 改变折线颜色
                                        width: 1
                                    }
                                }
                            },
                            symbol: 'none', // 去掉折线上的小圆点
                            smooth: true, // 这个是把线变成曲线
                            data: []
                        }]
                    }
                }
            }
        },
        computed: {
            ...mapGetters([
                'user'
            ])
        },
        mounted() {
            this.getInfo()
            this.getNotice()
            this.getApps()
        },
        methods: {
            getInfo() {
                this.$http.get('/workbench/commonInfo').then(result => {
                    if (result.success) {
                        this.info = result.data
                        // 对横,纵坐标赋值
                        // 昨日浏览次数
                        result.data.todayVisitCount.map(e => {
                            this.items.lineVisit.series[0].data.unshift(e.data || 0)
                            this.items.lineVisit.xAxis.data.unshift(e.date || 0)
                        })
                        // 接入应用数
                        result.data.appJoinCount.map(e => {
                            this.items.lineJoin.series[0].data.unshift(e.data || 0)
                            this.items.lineJoin.xAxis.data.unshift(e.date || 0)
                        })
                        // 昨日访问用户数
                        result.data.todayUserCount.map(e => {
                            this.items.lineToday.series[0].data.unshift(e.data || 0)
                            this.items.lineToday.xAxis.data.unshift(e.date || 0)
                        })
                        // 用户总数
                        result.data.totalUserCount.map(e => {
                            this.items.lineTotal.series[0].data.unshift(e.data || 0)
                            this.items.lineTotal.xAxis.data.unshift(e.date || 0)
                        })
                        // 初始化echarts
                        this.$refs.resCountInit.init()
                        this.$refs.appJoinInit.init()
                        this.$refs.unreadNoticeCountInit.init()
                        this.$refs.todayUserInit.init()
                    }
                    this.$method.updateView()
                })
            },
            getNotice() {
                this.$http.get('/gsNotice/getList', {
                    current: 1,
                    size: 4,
                    noticeStatus: 1
                }).then(result => {
                    if (result.success) {
                        this.noticeList = result.data.records
                    }
                })
            },
            getApps() {
                this.$http.get('/workbench/myRes', {
                    commonUse: true
                }).then(result => {
                    if (result.success) {
                        this.apps = result.data
                        this.$method.updateView()
                    }
                })
            },
            jump(path) {
                this.$router.push(this.$route.matched[0].path + '/' + path)
            }
        },
        components: {
            chart
        }
    }
</script>

<style scoped lang="less">
    .info {
        .content {
            float: left;
            width: 10.5rem;
            height: 2.8rem;
            margin-right: .3rem;
            /*background-color: #fff;*/
            /*padding-left: 1.15rem;*/

            .message {
                float: left;
                width: 2.7rem;
                margin-left: .6rem;
                margin-right: .3rem;

                .name {
                    color: #333;
                    font-weight: normal;
                    font-size: 0.3rem;
                    margin-top: 0.24rem;

                    b {
                        max-width: 80%;
                    }

                    .edit {
                        color: #309EFC;
                        cursor: pointer;
                    }
                }

                p {
                    font-size: 0.2rem;
                    margin-top: 0.19rem;
                    color: #999;
                    line-height: .3rem;
                    height: .6rem;
                }

                .time {
                    font-size: .18rem;
                    color: #323749;
                    margin-top: 0.3rem;
                }
            }

            .application-message {
                float: left;
                height: 1rem;
                margin-top: 0.6rem;
                /*margin-left: 1.14rem;*/
                border-left: 0.01rem solid #efefef;
                line-height: 1rem;

                .line {
                    font-size: 0.22rem;
                    color: #999;
                    display: inline-block;
                    margin-left: .8rem;

                    .iconfont {
                        margin-right: .2rem;
                        font-size: .22rem;
                    }

                    .num {
                        color: #333;

                        b {
                            font-size: 0.3rem;
                        }
                    }

                    .apps {
                        color: #FCA253;
                    }

                    .consult {
                        color: #F16F6F;
                    }
                }

                span {
                    font-size: 0.22rem;
                }

                .not {
                    margin-left: 1rem;
                    float: right;
                }
            }
        }

        .inform {
            height: 2.8rem;
            margin-left: 10.8rem;

            .headline {
                .title {
                    font-size: .2rem;
                    font-weight: bold;
                }

                .little {
                    float: right;
                }
            }

            ul {
                margin-top: .24rem;

                li {
                    font-size: 0.16rem;
                    margin-bottom: .2rem;
                    border-bottom: 1px solid #efefef;
                    line-height: .4rem;
                    height: .4rem;
                    cursor: pointer;

                    .title {
                        float: left;
                        max-width: 68%;
                    }

                    .inform-time {
                        color: #999;
                        float: right;
                    }
                }
            }

            .tip {
                margin-top: .7rem;
                text-align: center;
                color: #999999;
            }
        }
    }

    .answer {
        /*width: 100%;*/
        min-height: 3.2rem;
        background-color: #fff;
        margin: .3rem 0;

        .title {
            font-size: 0.2rem;
            font-weight: bold;
        }

        .answer-flex {
            display: flex;
            /*justify-content: space-between;*/
            align-items: center;
            margin-top: .6rem;

            > * {
                flex: auto;
            }

            .manage-box {
                /*margin-top: .74rem;*/
                /*margin-right: 1.06rem;*/
                width: 1.3rem;
                margin: 0 1rem;
                text-align: center;
                cursor: pointer;

                .manage {
                    width: .84rem;
                    height: .84rem;
                    line-height: .84rem;
                    text-align: center;
                    background: #F5F8FB;
                    border-radius: 50%;
                    overflow: hidden;
                    margin: 0 auto;
                    margin-bottom: .19rem;

                    i {
                        font-size: 0.34rem;
                        color: #0099ff;

                    }
                }

                span {
                    font-size: 0.16rem;
                    color: #999;
                }
            }

            .response {
                width: 13rem;
                min-height: 1rem;
                position: relative;
                /*border-right: 1px solid #efefef;*/

                &:after {
                    content: '';
                    position: absolute;
                    top: 5%;
                    right: 0;
                    width: 1px;
                    height: 90%;
                    background-color: #efefef;
                }

                li {
                    float: left;
                    width: 2rem;
                    padding: .1rem;
                    margin: .2rem 0;
                    text-align: center;
                    cursor: pointer;

                    .img {
                        display: block;
                        margin: 0 auto;
                        width: .7rem;
                        height: .7rem;
                    }

                    p {
                        font-size: .18rem;
                        width: 1.4rem;
                        margin: 0 auto;
                        margin-top: .1rem;
                    }

                    &.empty {
                        div {
                            border: .02rem solid #EFEFEF;
                            border-radius: .1rem;
                            width: .8rem;
                            height: .8rem;
                            line-height: .76rem;
                            text-align: center;
                            margin: .1rem auto;

                            i {
                                font-size: .3rem;
                                color: #EFEFEF;
                            }
                        }
                    }
                }
            }
        }
    }

    .glance-over,
    .visit {
        padding: 0.45rem 1rem;
        /*width: 8.05rem;*/
        width: calc(50% - .15rem);
        /*height: 2.8rem;*/
        background-color: #fff;
    }

    .glance-over,
    .visit {
        float: left;

        .today,
        .insert {
            width: 2.3rem;

            p {
                color: #333;
                font-size: 0.18rem;
            }

            .today-num {
                color: #5e95e8;
                font-size: 0.34rem;
                /*margin-top: 0.19rem;*/

                span {
                    font-size: 0.16rem;
                    margin-left: 0.17rem;
                }
            }

            .accessing-users {
                color: #8065d4;
            }
        }

        .today {
            float: left;
        }

        .insert {
            float: right;

            .insert-num {
                color: #7dccb0;
            }

            .total-user {
                color: #E1819A;
            }
        }
    }

    .visit {
        float: right;
    }

    .room {
        height: .8rem;
    }
</style>
